<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0 auto;
				padding: 0;
				font-family: verdana,"宋体" ;
				font-size:12px ;
			}
			#head ul li a{
				color: #808080;
				text-align: center;
				padding-left: 12px;
				padding-right: 11px;
			}
			#head2 ul li a{
				padding: 1px;
				padding-left: 21px;
				padding-right: 21px;
				font-size:17px ;
			}
			body {
				width: 1300px;
				position: relative;
			}
			
			a {
				text-decoration: none;
				color: white;
				text-align: center;
				
			}
			
			/*#head2{
				width: 1300px;
			}*/
			
			#head ul {
				/*position: relative;*/
				padding-top: -10px;
				padding-left:1035px ;
			}
			
			#head ul li {
				background: #EAFFFA;
				/*padding-left: 8px;*/
				list-style-type: none;
				float: left;
				/*color: white;*/
			}
			
			#head2 ul {
				float: left;
				background: #FE6915;
				margin-bottom: 5px;
				line-height: 50px;
			}
			
			#head2 ul li {
				/*padding: 22px;*/
				list-style-type: none;
				float: left;
				/*color: white;*/
			}
			
			#head2 img {
				width: 1292px;
			}
			
			#content {
				border: 1px solid gray;
				display: inline-block;
				position: relative;
				width: 1292px;
			}
			
			#content #art1 #pic1 {
				/*position: absolute;*/
				/*padding-left: 0px;*/
				/*border: 1px solid gray;*/
				width: 300px;
				float: left;
				margin-top: 80px;
			}
			
			#content #art1 p {
				width: 400px;
				/*border: 1px solid gray;*/
				float: left;
				height: 260px;
				margin-top: 95px;
			}
			
			#pic2 {
				position: absolute;
				left: -114px;
				top: 20px;
				/*border: 1px solid gray;*/
				margin-left: 100px;
			}
			
			#content #art2 #pic3{
				margin-top: 80px;
				/*border: 1px solid gray;*/
				float: left;
			}
			#content #art2 #pic4{
				position: absolute;
				top: 200px;
				left: 700px;
				/*margin-top: 200px;*/
				float: left;
			}
			
			#content #art2 p {
				width: 400px;
				margin-top: 80px;
				float: left;
			}
			
			#foot {
				/*margin: 0;*/
				/*border: 1px solid gray;*/
				line-height: 100px;
				text-align: center;
				/*margin-bottom:50px ;*/
			}
			
			#best {
				position: absolute;
				top: 70px;
				left: 28px;
			}
			
			#second {
				position: absolute;
				top: 60px;
				left: 703px;
			}
			
			#third {
				position: absolute;
				top: 185px;
				left: 701px;
			}
			
			#dis {
				position: absolute;
				right: 210px;
				top: 30px;
			}
			#ty{
				color: #206AB5;
			}
			#price{
				color: #9A112B;
			}
			#foot,#end{
				vertical-align:middle;
			}
		</style>
	</head>

	<body>
		<div id="head">
			<img src="../img/图片素材/logo.jpg" />
			<ul><img src="../img/图片素材/icon_count.png" id="dis" />
				<li>
					<a href="">尾品汇</a>
				</li>
				<li>
					<a href="">当当优品</a>
				</li>
				<li>
					<a href="">数码馆</a>
				</li>
				<li>
					<a href="">都看阅器</a>
				</li>
			</ul>
		</div>
		<div id="head2">
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">图书 </a>
				</li>
				<li>
					<a href="">音像 </a>
				</li>
				<li>
					<a href="">童装</a>
				</li>
				<li>
					<a href="">服装</a>
				</li>
				<li>
					<a href="">鞋靴 </a>
				</li>
				<li>
					<a href="">运动 </a>
				</li>
				<li>
					<a href="">箱包 </a>
				</li>
				<li>
					<a href="">美妆 </a>
				</li>
				<li>
					<a href="">珠宝</a>
				</li>
				<li>
					<a href="">家居</a>
				</li>
				<li>
					<a href="">食品 </a>
				</li>
				<li>
					<a href="">酒水</a>
				</li>
				<li>
					<a href="">手机 </a>
				</li>
				<li>
					<a href="">数码 </a>
				</li>
				<li>
					<a href="">电脑</a>
				</li>
				<li>
					<a href="">家电</a>
				</li>
			</ul>
			<img src="../img/图片素材/banner.png" />
		</div>
		<div id="content">
			<div id="art1">
				<img src="../img/图片素材/bg_bang.gif" id="pic2" />
				<img src="../img/图片素材/book-01.jpg" id="pic1" />
				<img src="../img/图片素材/bookNo1.gif" id="best" />
				<p><span id="ty">偷影子的人</span> <br /> 作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译<br /> 出版社：湖南文艺出版社
					<br /> 当当价：<span id="price">￥ 17.90</span><br /> 不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。 一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
			</div>
			<div id="art2">
				<img src="../img/图片素材/book-02.jpg" id="pic3"/>
				<img src="../img/图片素材/bookNo2.gif" id="second" />
				<p>
					<span id="ty">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</span> <br /> 作 者：柴静 著<br /> 出版社：广西师范大学出版社
					<br /> <span id="price">￥ 29.40</span> <span id="ty">7.4折</span></p>
				<img src="../img/图片素材/book-03.jpg" id="pic4"/>
				<img src="../img/图片素材/bookNo3.gif" id="third" />
				<p><span id="ty">改变孩子先改变自己</span id="ty"><br /> 作 者：贾容韬 贾毅 著<br /> 出版社：作家出版社
					<br /> <span id="price">￥ 22.20</span> <span id="ty">7.4折</span></p>
			</div>
		</div>
		<div id="foot">&copy;" 当当网 2004-2017, All Rights Reserved<img src="../img/图片素材/validate.gif" id="end">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
	</body>

</html>